<template>
  <el-dialog title="统计" :visible.sync="visible" width="60%">
    <div class="line-bar" ref="lineBar"></div>
  </el-dialog>
</template>

<script>
  import * as echarts from 'echarts';
  import { getZheXianTu } from '@/api/pet'
  export default {
    data() {
      return { visible: false }
    },
    methods: {
      init(id) {
        this.visible = true;
        getZheXianTu(id).then(res => {
          if (res && res.code === 0) {
            let xData = [], yData = [], wData = [], hData = [];
            res.data.forEach(item => {
              xData.push(item.time);
              wData.push(item.weight);
              hData.push(item.height);
            })
            yData.push({
              name: 'weight',
              type: 'line',
              data: wData
            }, {
              name: 'height',
              type: 'line',
              data: hData
            })
            this.initBar(xData, yData);
          }
        }).catch(() => { })
      },
      initBar(xData = [], yData = []) {
        const yTitleData = ['weight', 'height'];
        let myChart = echarts.init(this.$refs.lineBar);
        const option = {
          title: {
            text: ''
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: yTitleData
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xData
          },
          yAxis: {
            type: 'value'
          },
          series: yData
        };
        option && myChart.setOption(option);
      },
    }
  }
</script>

<style scoped>
.line-bar {
  width: 100%;
  height: 500px;
}
</style>